<template>
  <div class="certificates">
    <div class="certificate-content">
      <div class="cert">
        <div class="certificate">
          <p class="title">资质证书</p>
          <ul class="certList">
            <li v-for="card in qualicationData.list" :key="card.supplierQualificationId" @click="() => onPreviewClick(card)">
              {{ consts.SupplierQualificationType.find((e) => e.qualificationType === card.qualificationType)?.title }}
            </li>
          </ul>
        </div>
        <div class="cert-img">
          <img v-if="curCard" :src="curCard.qualificationImg" @click="onShowImgClick(curCard.qualificationImg)" />
          <img v-else :src="defaultImage[0]" @click="onShowImgClick(defaultImage[0])" />
        </div>
      </div>
    </div>
  </div>

  <el-image-viewer ref="previewViewer" v-if="showImageViewer" @close="closeImgView" :url-list="srcList" />
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { useRoute } from 'vue-router'
import api from '@/api'
import consts from '@/consts'
import { SupplierStore } from '@/store/supplier'
import Link from '@/components/button/link.vue'

const _supplierStore = SupplierStore()
const route = useRoute()
const curCard = ref()
const showImageViewer = ref(false)
const srcList = ref([])

const QualificationTypes = {
  BUSINESS_LICENSE: 1,
  INTERNET_CERTIFICATE: 2,
  MEDICAL_INSTITUTION_PRACTICING_LICENSE: 3,
  MEDICAL_EQUIPMENT_BUSINESS_LICENSE: 4,
  MEDICAL_DEVICE_PRODUCTION_LICENSE: 5,
  MEDICAL_DEVICE_BUSINESS_RECORD_CERTIFICATE: 6
}

const defaultImage = computed(() => {
  return qualicationData.list.map((e) => e.qualificationImg)
})

const qualicationData = reactive({
  list: []
})

const supplierQualicationData = async () => {
  let { data, err } = await api.get(`/medinstrument/site/supplierQualification?supplierId=${route.query.supplierId}`)
  if (err) {
    ElMessage.error(err)
  } else {
    qualicationData.list = data.supplierQualificationList.sort((a, b) => {
      const ret = QualificationTypes[a.qualificationType] > QualificationTypes[b.qualificationType]
      return ret ? 1 : -1
    })

    _supplierStore.setName(data.supplierName)
  }
}

const onPreviewClick = (card) => {
  curCard.value = card
}

const onShowImgClick = (url) => {
  srcList.value = [url]
  showImageViewer.value = true
}

const closeImgView = () => {
  showImageViewer.value = false
}

onMounted(() => {
  supplierQualicationData()
})
</script>

<style scoped lang="scss">
.certificates {
  display: flex;
  min-height: 540px;

  .certificate-content {
    display: flex;
    width: 1080px;
    margin: 0 auto;

    .cert {
      display: flex;
      padding-top: 20px;

      .certificate {
        width: 240px;

        .title,
        .certList li {
          line-height: 16px;
          padding: 13px 0 13px 20px;
        }

        .title {
          display: flex;
          align-items: center;
          background-color: #f9f9f9;
          font-weight: 500;
        }

        .certList {
          li {
            cursor: pointer;
            background-color: #fff;
          }

          li:hover {
            background-color: #fff9ee;
            color: var(--color-primary);
          }
        }
      }

      .cert-img {
        flex: 1;
        margin-left: 20px;
        cursor: pointer;
        img {
          width: 100%;
        }
      }
    }
  }
}
</style>
